<template>
  <div>
    <div class="h-32 w-full mb-8 scrollbar-thumb-gray-400 scrollbar-track-gray-100 scrollbar-thin bg-white box-border p-8 text-lg font-bold">拖拽操作</div>
    <div class="h-part w-full shadow-lg bg-white p-8 box-border">
      <el-table
        ref="tableRef"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{
          background: 'rgba(228,228,228,0.37)',
          color: '#3D3D3D',
          fontSize: '16px'
        }"
      >
        <el-table-column type="index" label="order" align="center" width="160px"> </el-table-column>
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Sortable from 'sortablejs'
const tableRef = ref(null)
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

onMounted(() => {
  // 获取需要排序的子元素的父元素
  let el = tableRef.value.$el.querySelectorAll('.el-table__body-wrapper tbody')[0]
  //设置配置
  let ops = {
    animation: 200,
    ghostClass: 'sortable-ghost',
    //拖动结束
    onEnd: function ({ newIndex, oldIndex }) {
      console.log(newIndex, oldIndex)
    }
  }
  //初始化
  let sortable = Sortable.create(el, ops)
})
</script>
<style scoped>
:deep(.sortable-ghost) {
  opacity: 0.6;
  color: #fff !important;
  background: #304156 !important;
}
:deep(.el-table__row) {
  cursor: move;
}
</style>
